<style scoped>
.header {
  border-bottom: 1px solid #d9d9d9;
  color: rgb(0 0 0 / 85%);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.header-btn {
  float: right;
}

.pointer {
  cursor: pointer;
}
</style>

<template>
  <div class="m-4 mr-0 overflow-hidden bg-white">
    <div class="header px-2 py-1.5">
      <span>授权码设置</span>
      <Authority :value="'prem.add'">
        <AButton class="header-btn" type="primary" size="small" @click="handleCreate" v-show="modelValue > 0">新增</AButton>
      </Authority>
    </div>
    <div>
      <a-list size="small" :data-source="premList">
        <template #renderItem="{ item }">
          <a-list-item>
            <ATag color="pink">#{{ item.premCode }} {{ item.premName }}</ATag>
            <ASpace>
              <Authority :value="'prem.edit'">
                <Icon class="pointer" icon="clarity:note-edit-line" @click="handleEdit(item)" />
              </Authority>
              <Authority :value="'prem.del'">
                <Icon class="pointer" icon="ant-design:delete-outlined" @click="handleDelete(item)" />
              </Authority>
            </ASpace>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <PremCodeEditDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Authority } from '/@/components/Authority';
import { ViewPremModel } from '/@/api/system/model/viewModel';
import { getViewPremList, removeViewPrem } from '/@/api/system/view';
import PremCodeEditDrawer from './PremCodeEditDrawer.vue'
import { useDrawer } from '/@/components/Drawer';
import Icon from '@/components/Icon/Icon.vue';


const [registerDrawer, { openDrawer }] = useDrawer();
const props = defineProps<{ modelValue: number }>();
const premList = ref<ViewPremModel[]>([]);

watch(() => props.modelValue, () => {
  reload()
});

const reload = async () => {
  premList.value = await getViewPremList(props.modelValue)
}

function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    record: {
      viewId: props.modelValue
    }
  });
}

function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

async function handleDelete(record: Recordable) {
  await removeViewPrem([record['id']]);
  await reload();
}

async function handleSuccess() {
  await reload();
}

</script>
